<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


		<link rel="stylesheet" type="text/css" href="css/sku.css" />
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			var jsonStr = '[{"parentId":1,"skuAttr":"尺寸","itemList":[{"id":0,"skuName":"39码"},{"id":1,"skuName":"40码"},{"id":2,"skuName":"41码"},{"id":3,"skuName":"42码"}]},{"parentId":2,"skuAttr":"颜色","itemList":[{"id":0,"skuName":"红色"},{"id":1,"skuName":"白色"},{"id":2,"skuName":"黄色"},{"id":3,"skuName":"蓝色"}]}]';
			var skuJson = '[{"itemId":"1020","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536040952&di=3d0e69918da73060dcdb921173d5a791&imgtype=jpg&er=1&src=http%3A%2F%2Fimg4.99114.com%2Fgroup1%2FM00%2F19%2F78%2FwKgGMFgqsHSAP6BfAAIaSnHqL-E258.jpg","name":"城市丽人","price":100.0},{"itemId":"1021","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233746&di=ee6e713744b5dff59ddd2725f4ac8eb6&imgtype=0&src=http%3A%2F%2Ffile5.youboy.com%2Fe%2F2015%2F4%2F28%2F91%2F662831.jpg","name":"夏季新品连衣裙","price":101.5},{"itemId":"1022","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233746&di=6e119707497b4b2d5bea2fa53724ce08&imgtype=0&src=http%3A%2F%2Fimg.go007.com%2F2017%2F04%2F08%2F185db2e70c24a49b_2.jpg","name":"红豆女装","price":103.0},{"itemId":"1023","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233745&di=353ed113ae709cd9d134bb59014d473b&imgtype=0&src=http%3A%2F%2Fimg000.hc360.cn%2Fy4%2FM00%2FF7%2F96%2FwKhQiFUpYruEQ2i6AAAAAHLEXbw797.jpg","name":"城市丽人","price":104.5},{"itemId":"1120","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233741&di=19f9b9a22c4de4ed6c2a17c9a9534c9d&imgtype=0&src=http%3A%2F%2Fimg000.hc360.cn%2Fhb%2FMTQ2MjM1NjE1MTQxNy03ODQyOTIwODQ%3D.jpg","name":"夏季新品连衣裙","price":106.0},{"itemId":"1121","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233743&di=bb19b1a16788e58c5d6b0ac4ac17bbe1&imgtype=0&src=http%3A%2F%2Fmlady.2liang.net%2Fd%2Ffile%2Fclothing%2Fxiazhuang%2F2016-04%2Fefebf66e3e70b09d0371b7c045580871.jpg","name":"红豆女装","price":107.5},{"itemId":"1122","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233743&di=e1c715e4919b7e888fe985b0b9f080de&imgtype=0&src=http%3A%2F%2Fimg004.hc360.cn%2Fy4%2FM05%2F25%2FF1%2FwKhQiFT6GsqEHiplAAAAAAaQmss866.jpg","name":"城市丽人","price":109.0},{"itemId":"1123","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233743&di=731cfe3cea4c6c5f893c743c5b94bc7d&imgtype=0&src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi1%2FTB1JAMnfkSWBuNjSszdXXbeSpXa_%2521%25210-item_pic.jpg_400x400.jpg","name":"夏季新品连衣裙","price":110.5},{"itemId":"1220","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233740&di=f6c5afcc7dd462fa5bfee7e0963b46c9&imgtype=0&src=http%3A%2F%2Fd6.yihaodianimg.com%2FN02%2FM0B%2F6F%2FAA%2FCgQCslOlNgCAZFOxAAHlr_RIVAg76400.jpg","name":"红豆女装","price":112.0},{"itemId":"1221","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446471851&di=f1a483e99c8e8be05f3a9702c4c097ec&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D74341273%2C3968231785%26fm%3D214%26gp%3D0.jpg","name":"城市丽人","price":113.5},{"itemId":"1222","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233807&di=02c117c17b1a83ca8ca76ec9dfbfddf7&imgtype=0&src=http%3A%2F%2Fd6.yihaodianimg.com%2FN07%2FM00%2F95%2F6D%2FChEbvFWsImOAalfeAAGGZc9le2005000.jpg","name":"夏季新品连衣裙","price":115.0},{"itemId":"1223","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233807&di=9a91b89aad071f1c03ea9bb07b886baa&imgtype=0&src=http%3A%2F%2Fm.360buyimg.com%2Fn12%2Fg14%2FM02%2F1B%2F0B%2FrBEhV1NGOGYIAAAAAAIn4ZRI2LwAALrGAGW-pIAAif5340.jpg%2521q70.jpg","name":"红豆女装","price":116.5},{"itemId":"1320","img":"https://img.alicdn.com/imgextra/i2/712330740/TB1jbAcCFGWBuNjy0FbXXb4sXXa_!!0-item_pic.jpg_430x430q90.jpg","name":"城市丽人","price":118.0},{"itemId":"1321","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233807&di=2bf2316f331895bd828abe830f2d1723&imgtype=0&src=http%3A%2F%2Fimage4.suning.cn%2Fuimg%2Fb2c%2Fnewcatentries%2F0000000000-000000000688881146_2_800x800.jpg","name":"夏季新品连衣裙","price":119.5},{"itemId":"1322","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233806&di=6bbad8c769ac88fd2c32fa764103f793&imgtype=0&src=http%3A%2F%2Fimg009.hc360.cn%2Fm6%2FM04%2F73%2F53%2FwKhQoVcVtiaEPtGfAAAAAK4k0NY745.jpg","name":"红豆女装","price":121.0},{"itemId":"1323","img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535446233805&di=43e3ad8b377a79a1fc95981a2491b6f5&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01bb875929671aa801216a3e9881f0.jpg%401280w_1l_2o_100sh.jpg","name":"城市丽人","price":122.5}]';
 
			var $masterImg; //主图
			var $smallImg; //小图
			var $skuName; //商品名称
			var $skuSpec; //商品规格组合
			var $skuPrice; //商品价格
 
			var skuIds = new Array(); //所有规格的全id        
			var skuList = new Array(); //所有规格属性json集合
			var goodsList = new Array(); //所有单品json集合
			var specIds; //规格组合id
			var specNames; //屬性名称
			var firstNameSpec="";
			var firstGoodsObj;
 
			$(function() {
				init$Obj();
				skuJson2Arr();
				addSkuList($skuContainer);
			});
 
			/**
			 * 初始化jquery元素
			 */
			function init$Obj() {
				$masterImg = $("#master-img");
				$smallImg = $("#small-img");
				$skuName = $("#sku-name");
				$skuSpec = $("#sku-spec");
				$skuPrice = $("#sku-price");
				$skuContainer =$("#sku-spec-contanier");
			}
 
			/**
			 *动态添加sku的规格属性 
			 */
			function addSkuList($skuContainer) {
				
				$.getJSON("spec_list.json", function(data) {
					specIds = new Array();
					specNames = new Array();
 
					$.each(data, function(index, info) {
						console.log("規格=" + JSON.stringify(info));
						skuList[index] = info;
						var obj = info;
						var $div = $("<div style='margin-top: 15px;'></div>");
						var $span = $("<span>" + obj.skuAttr + "</span></br></br>");
						$div.append($span);
					
						var objList = obj.itemList;
						var $sdiv = $("<div></div>");
 
						$.each(objList, function(index2, goods) {
							var sobj = goods;
							var $sspan = $("<span>" + sobj.skuName + "</span>");
							var tempId = ((index + 1).toString() + index2.toString()) + "&" + index;
							$sspan.attr("id", tempId);
					
							if(index2 == 0) {
								$sspan.addClass("right-bottom-span-select");
								firstNameSpec=firstNameSpec+sobj.skuName;
								console.log("第一个商品的名称="+firstNameSpec);
							}else 
								$sspan.addClass("right-bottom-span-normal");
							
							$sdiv.append($sspan);
							
							$($sspan).click(function() {
								$(this).removeClass("right-bottom-span-normal").addClass("right-bottom-span-select");
								$(this).siblings().removeClass("right-bottom-span-select").addClass("right-bottom-span-normal");
								var mId = $(this).attr("id");
								var splits = mId.split("&");
								var mName = $(this).html();
								specIds[splits[1]] = splits[0];
								specNames[splits[1]] = mName;
								getSpecIds();
							});
							
							$div.append($sdiv);
							$skuContainer.append($div);
						   });
					});
				});
			}
			/**
			 * 把skuJson解析存储到数组
			 */
 
			function skuJson2Arr() {
				$.getJSON("goods_list.json", function(data) {
					$.each(data, function(index, info) {
						if(index==0) {
							firstGoodsObj=info;
							showgGoodsInfo(firstGoodsObj,firstNameSpec);
							console.log("第一个商品="+JSON.stringify(firstGoodsObj));
						}
						goodsList[index] = info;
						skuIds[index] = info.itemId;
						//console.log("商品=" + info);
					});
				});
 
			}
 
			/**
			 * 获取sku最终组合id
			 */
 
			function getSpecIds() {
				var ids = "";
				var names = "";
				$.each(specIds, function(index, info) {
					ids = ids + specIds[index];
					names = names + specNames[index];
				});
 
				console.log("##############------" + ids + "----" + names);
				$.each(skuIds, function(index) {
					if(ids == this) {
						var obj = goodsList[index];
						showgGoodsInfo(obj, names);
					}
				});
 
			}
 
			/**
			 *展示商品数据
			 * {"itemId":"1020","img":"258.jpg","name":"城市丽人","price":100.0}
			 */
			function showgGoodsInfo(jsonObj, spec) {
				console.log("json="+JSON.stringify(jsonObj));
				$masterImg.attr("src", jsonObj.img);
				$smallImg.attr("src", jsonObj.img);
				$skuName.html(jsonObj.name);
				$skuPrice.html("¥" + jsonObj.price);
				$skuSpec.html(spec);
			}
		</script>
 
		<title>SKU商品规格</title>
	</head>
 
	<body>
 
		<div class="outer-div">
			<!-- 左边布局-->
			<div class="left-div">
				<img id="master-img" class="master-img" alt="商品主图" />
			</div>
 
			<!-- 右边布局-->
			<div class="right-div">
 
				<img id="small-img" class="right-top-img" alt="规格图" />
 
				<div class="right-top-div">
 
					<div class=".right-top-span">
						<span id="sku-name">请新版连衣裙</span></br>
					</div>
 
					<div class="right-top-span">
						<span id="sku-spec">39号红色</span></br>
					</div>
 
					<div class="right-top-span">
						<span id="sku-price">￥129.00</span>
					</div>
				</div>
 
				<!-- sku详情 -->
				<div id="sku-spec-contanier" class="right-bottom-div">
				</div>
 
			</div>
		</div>
	</body>
 

</html>
